<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			h3{
				background-color: orange;
			}
		</style>
		<!-- <meta name="viewport" content="width=device-width"> -->
		<!-- <meta name="viewport" content="width=108"> -->
		<!-- <meta name="viewport" content="initial-scale=1 width=device-width"> -->
		<!-- <meta name="viewport" content="width=device-width maximum-scale=1.0 viewport-fit=cover"> -->
		<!-- 作用：开启理想视口、不让用户缩放、不让刘海屏留白 -->
		<meta name="viewport" content=" width=device-width initial-scale=1.0 maximum-scale=1 minimum-scale=1 user-scalable=no viewport-fit=cover">
	</head>
	<body>
		<h3 id="h1" style="font-size: 60px;"></h3>
		<script type="text/javascript" >
			console.log('布局视口宽度：',document.documentElement.clientWidth)
			console.log('视觉视口宽度：',window.innerWidth)
			setInterval(()=>{
				const h1 = document.getElementById('h1')
				h1.innerHTML = '布局视口宽度：'+document.documentElement.clientWidth+'<br/>'
				h1.innerHTML += '视觉视口宽度：'+window.innerWidth
			},200)
		</script>
	</body>
</html>